<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="rotate.css">
</head>

<body>
  <header>
    <div class="logo">
      <img src="img/风车2.svg" alt="">
    </div>

    <div id="head-nav">

      <ul>
        <li>百度联盟</li>
        <li>百度节能</li>
        <li>百度减排</li>
        <li>百度风车</li>
      </ul>
      <div class="manger"><button>管理中心</button></div>
    </div>
    <img src="img/01.jpg" alt="" class="big-logo">

  </header>


 <!-- 查询框 -->
 <div class="search">

    <div class="school-input">
       <p>选择您的学校</p>
       <input type="text">  
   
    </div>
    <div class="school-input">
      <p>选择您的入学年份</p>
      <input type="text">
  
   </div>
   <div class="school-input">
    <p>选择您的电子邮箱</p>
    <input type="text">

 </div>
 <div class="btn">
  <button>报名</button>
 </div>
    
    



 </div>




 



  <!-- 主体页面 -->

  <article>

    <div class="title">
      <p>我们的宗旨--用爱发电</p>
    </div>
    <div id="box">
      <div class="cards1">
        <p>平原风电</p>
        <img src="img/11.jpg" alt="">
      </div>

      <div class="cards2">
        <p>高原风电</p>
        <img src="img/16.jpg" alt="">
      </div>

      <div class="cards3">
        <p>海上风电</p>
        <img src="img/13.jpg" alt="">
      </div>

      <div class="cards4">
        <p>稻田风电</p>
        <img src="img/17.jfif" alt="">
      </div>

    </div>

    <!-- 主页面的肚皮部分 -->
    <div id="contain">
      <p>课程安排</p>
      <!-- 选项卡部分 -->
      <!-- 最外层的盒子 -->
    </div>
    <div class="content">
      <!-- 头部 -->
      <div class="tab"><span class="bgc">JS</span><span>CSS</span><span>HTML</span><span>全部课程</span>
      </div>


      <!-- 内容区域 -->
      <div class="cont" id="cont">

        <div class="show">
          <img src="img/jsx.png">
          <ul>
            <li class="title">第三阶段:JavaScript</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
          </ul>
        </div>

        <div>
          <img src="img/CSS3.svg">
          <ul>
            <li class="title">第二阶段:CSS</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
          </ul>

        </div>

        <div>
          <img src="img/HTML5-fill.png">
          <ul>
            <li class="title">第一阶段:HTML</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
          </ul>


        </div>

        <!-- 全部课程 -->
        
          <div>
            <img src="img/jsx.png">
            <ul>
              <li class="title">第三阶段:JavaScript</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
            </ul>
        
            <img src="img/CSS3.svg">
            <ul>
              <li class="title">第二阶段:CSS</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
            </ul>
            <img src="img/HTML5-fill.png">
            <ul>
              <li class="title">第一阶段:HTML</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中,基于原型编程、多范式的动态脚本语言</li>
            </ul>

            </div>
            
     
    
             




       



      </div>










  </article>





  <!-- 侧边栏 -->
  <aside>
    <ul>
      <li class="fengche-up">
        <img src="img/风车2 (2).png" alt="">
      </li>
      <li class="fengche-down"></li>
      <li>百</li>
      <li>度</li>
      <li>前</li>
      <li>端</li>
      <li>实</li>
      <li>战</li>
      <li>作</li>
      <li>业</li>
      <li> - </li>
      <li> 羊</li>
      <li>Ice Yang</li>
      <li> 2022-01-20</li>
    </ul>

  </aside>

  <!-- footer -->

  <footer>
    <div class="foot-left">
      <div class="cricle1">
        <img src="img/info.png" alt="">
      </div>
      <div class="cricle2"><img src="img/info.png" alt=""></div>
      <div class="cricle3"><img src="img/info.png" alt=""></div>

    </div>


    <div class="foot-right1">
      <ul>
        <li class="big">Links</li>
        <li>我自山河林间来</li>
        <li>惊鸿一现百花开</li>
        <li>苦酒折柳今相离</li>
        <li>也无风月也无你</li>
        <li>......</li>

      </ul>


    </div>
    <div class="foot-right2">
      <ul>
        <li class="big">Links</li>
        <li>小扇引微凉</li>
        <li>悠悠夏日长</li>
        <li>竹斋眠听雨</li>
        <li>梦里长青苔</li>
        <li>......</li>

      </ul>


    </div>
    <div class="foot-right3">
      <ul>
        <li class="big">Links</li>
        <li>本是人间不归客</li>
        <li>却因青灯恋红尘</li>
        <li>你与春风皆过客</li>
        <li>我携秋水揽星河</li>
        <li>......</li>

      </ul>


    </div>



  </footer>

  <div class="white"></div>










  <script type="text/javascript">
    window.onload = function () {
      // 1.获取  span元素
      var spans = document.getElementsByTagName("span");
      var divs = document.getElementById("cont").getElementsByTagName("div");
      // console.log(spans) //数组
      // console.log(divs) //数组
      for (var i = 0; i < spans.length; i++) {

        spans[i].index = i;
        // console.info(spans[i].index);
        spans[i].onclick = function () {




          // alert(1);
          //排他思想：把所有元素的样式都先清除掉，然后给需要的再次添加样式
          // spans[i].className="";
          for (var i = 0; i < spans.length; i++) {
            spans[i].style.color = ""
            spans[i].className = "";
            divs[i].className = '';



          }
          console.info(this);//想不明白就打印看一看

          this.className = "bgc"; //this 指代此时 标签



          //     for (var i = 0; i <divs.length; i++ ) {
          //         divs[i].className='';

          //    }
          console.info(this.index);//想不明白就打印看一看 //对应下标
          this.style.color = "black";
          divs[this.index].className = 'show';


        }

      }


      var text = document.getElementsByClassName()

    }
  </script>

</body>

</html>